<template>


  <el-row class="warp">
    <el-dialog
      title="已经创建成功了....."
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>我就不清空数据了，你要是重复提交，自己负责后果</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>应援管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加应援</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item>
        <el-radio-group v-model="supportType">
          <el-radio-button label="1">个人模式</el-radio-button>
          <el-radio-button label="2">群组模式</el-radio-button>

        </el-radio-group>
      </el-form-item>

      <el-form-item label="活动名称" style="margin-top: 20px">
        <el-input v-model="supportTitle"></el-input>
      </el-form-item>
      <el-form-item v-if="supportType==1" label="关联明星" style="margin-top: 20px">
        <el-select
          v-model="supportStarId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading">
          <el-option
            v-for="item in startList"
            :key="item.star_id"
            :label="item.name"
            :value="item.star_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="封面配图" prop="region">

        <el-upload
          action=""
          list-type="picture-card"
          :http-request="handleUploadBigImg"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="BoBo目标">
        <el-input v-model="supportBoBo" value="number"></el-input>
      </el-form-item>

      <el-form-item label="砍值范围">
        <el-input placeholder="最小值" v-model="supportMinScore"></el-input>
        <el-input placeholder="最大值" v-model="supportMaxScore" style="margin-top: 20px"></el-input>
      </el-form-item>
      <el-form-item label="设置时间" required>
        <div class="block">
          <el-date-picker
            v-model="supportTime"
            type="datetimerange"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="项目详情">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 100}"
          placeholder="请输入内容"
          v-model="supportDetails"/>
      </el-form-item>
      <el-form-item label="粉丝站">
        <el-input v-model="supportStationName"></el-input>
      </el-form-item>
      <el-form-item label="粉丝站logo" prop="region">
        <el-upload
          action=""
          list-type="picture-card"
          :http-request="handleUploadStationLogo"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="赞助商" prop="name">
        <el-input v-model="supportAdName"></el-input>
      </el-form-item>

      <el-form-item label="赞助商Logo" prop="region">
        <el-upload
          action=""
          :http-request="handleUploadAdLogo"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="分享标题" prop="name">
        <el-input v-model="supportShareTitle"></el-input>
      </el-form-item>
      <el-form-item label="分享描述" prop="name">
        <el-input v-model="supportShareDesc"></el-input>
      </el-form-item>
      <el-form-item v-if="supportType==1" label="分享图" prop="region">
        <el-upload

          action=""
          :http-request="handleUploadShareImg"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="createSupport">立即创建</el-button>
      </el-form-item>
    </el-form>
  </el-row>

</template>
<script>
  import * as qiniu from 'qiniu-js'
  import API from '../../api/api';

  export default {

    data() {
      return {
        dialogVisible: false,
        supportType: '1',
        supportTitle: '',
        supportBigImg: '',
        supportBoBo: 0,
        supportTime: [],
        supportStarId: '',
        startList: [],
        supportDetails:'',
        supportStationName: '',
        supportStationLogo: '',
        supportAdName: '',
        supportAdLogo: '',
        supportAdUrl: '',
        supportMinScore: 0,
        supportMaxScore: 0,
        supportShareTitle: '',
        supportShareDesc: '',
        supportShareImg: ''
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      remoteMethod(query) {
        let that = this;
        console.log('我搜索了', query)
        if (query !== '') {
          setTimeout(() => {
            API.searchStar(query).then(function (result) {
              console.log("我拿到列表了", result)
              that.startList = result.data.items

            })

          }, 500);
        } else {
          this.startList = [];
        }
      },
      createSupport() {

        let that = this;
        let params = {
          title: that.supportTitle,
          begin_time: that.supportTime[0],
          end_time: that.supportTime[1],
          image: that.supportBigImg,
          club_name: that.supportStationName,
          club_icon: that.supportStationLogo,
          star_id: that.supportStarId,
          brand_name: that.supportAdName,
          brand_icon: that.supportAdLogo,
          brand_title: '-',
          target: parseInt(that.supportBoBo),
          details: that.supportDetails,
          share_title: that.supportShareTitle,
          share_image: that.supportShareImg,
          share_describe: that.supportShareDesc,
          max_rate: parseInt(that.supportMaxScore),
          min_rate: parseInt(that.supportMinScore)
        }

        console.log('33', JSON.stringify(params))
        if (that.supportType == 1) {
          API.creatGvSupport(params).then(function (result) {
            console.log("返回结果", result)
            if (result.code == 0) {
              that.dialogVisible = true
            } else {
              that.$message.error('创建失败');
            }

          })
        } else if (that.supportType == 2) {
          API.creatAvSupport(params).then(function (result) {
            console.log("返回结果", result)
            if (result.code == 0) {
              that.dialogVisible = true
            } else {
              that.$message.error('创建失败');
            }
          })
        }

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      handleAvatarSuccess(res, file) {
        this.supportBigImg = URL.createObjectURL(file.raw);

      },
      handleUploadBigImg(param) {
        this.getTokenFromSer(param, 'bigImg')
      },
      handleUploadStationLogo(param) {
        this.getTokenFromSer(param, 'stationLogo')
      },
      handleUploadAdLogo(param) {
        this.getTokenFromSer(param, 'adLogo')
      },
      handleUploadShareImg(param) {
        this.getTokenFromSer(param, 'share')
      },

      getTokenFromSer(param, type) {
        var fileObj = param.file;
        let that = this;
        console.log('上传', fileObj)
        API.getUploadToken(type).then(function (result) {
          console.log("我拿到图片token", result)
          that.uploadPicToQiniu(fileObj, result.data.token, result.data.key, type)
        })
      },
      uploadPicToQiniu(file, token, key, type) {
        let that = this;
        let config = {
          useCdnDomain: true,
          region: null,
        };
        let putExtra = {
          fname: "mofans-img",
          params: {},
          mimeType: ["image/png", "image/jpeg", "image/gif"]
        };
        console.log('开始传图片')
        console.log(key, token)

        let observable = qiniu.upload(file, key, token, putExtra, config);


        var observer = {
          next(res) {
            console.log('----', res)
          },
          error(err) {
            console.log(err)
            that.$message.error('图片上传失败，重新上传');
          },
          complete(res) {
            console.log('--==--', res)
            if (type == 'bigImg') {
              that.supportBigImg = key
            } else if (type == 'stationLogo') {
              that.supportStationLogo = key
            } else if (type == 'share') {
              that.supportShareImg = key
            }

            else {
              that.supportAdLogo = key
            }
            that.$message({
              message: '恭喜你，图片上传成功',
              type: 'success'
            });
          }
        };

        observable.subscribe(observer)


      }
    }
  }
</script>
<style>
  .support-icon-plus {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 0;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
